<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/cropbox/cropbox.css}" rel="stylesheet"/>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-news-add">
			<div class="form-group">	
				<label class="col-sm-3 control-label">新闻标题：</label>
				<div class="col-sm-8">
					<input id="newsTitle" name="newsTitle" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">新闻内容：</label>
				<div class="col-sm-8" >
            		<textarea type="text" style="height: 280px" name="newsContent" class="form-control" placeholder="请输入新闻内容..."></textarea>
				</div>
			</div>
		</form>

		<div class="form-group">
			<label class="col-sm-4 control-label">图片上传：</label>
			<div class="col-sm-8">
				<div class="imageBox">
					<div class="thumbBox"></div>
					<div class="spinner" style="display: none">Loading...</div>
				</div>
				<div class="action">
					<div class="new-contentarea tc">
						<a href="javascript:void(0)" class="upload-img"> <label for="upImage">上传图像</label> </a>
						<input type="file" class="" name="upImage" id="upImage" accept="image/*"/>
					</div>
					<input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切" />
					<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" />
					<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />
				</div>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-3" id="cropped"></div>
		</div>

	</div>
    <div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/cropbox/cropbox.js}"></script>
    <script type="text/javascript">
		var cropper;
		var prefix = ctx + "system/news";
		var image = '[[${news.imagePath}]]';
		var options = {
			thumbBox: '.thumbBox',
			spinner: '.spinner',
			imgSrc: $.common.isEmpty(image) ? ctx + 'img/uploadImage.jpg' : ctx + 'profile/upload/' + image
		}
		cropper = $('.imageBox').cropbox(options);
		$('#upImage').on('change', function() {
			var reader = new FileReader();
			reader.onload = function(e) {
				options.imgSrc = e.target.result;
				//根据MIME判断上传的文件是不是图片类型
				if((options.imgSrc).indexOf("image/")==-1){
					$.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG,JPEG，PNG后缀的文件。");
				} else {
					cropper = $('.imageBox').cropbox(options);
				}
			};
			reader.readAsDataURL(this.files[0]);
		});

		$("#form-news-add").validate({
			rules:{
				xxxx:{
					required:true,
				},
			},
			focusCleanup: true
		});


		$('#btnCrop').on('click', function(){
			var img = cropper.getDataURL();
			$('.cropped').html('');
			$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
		});

		$('#btnZoomIn').on('click', function(){
			cropper.zoomIn();
		});

		$('#btnZoomOut').on('click', function(){
			cropper.zoomOut();
		});

		function submitHandler() {
	        if ($.validate.form()) {
				var img = cropper.getBlob();
				var data=$("#form-news-add").serializeArray();
				var formdata = new FormData();
				formdata.append("newsTitle",data[0].value);
				formdata.append("newsContent",data[1].value);
				formdata.append("image", img);
				$.ajax({
					url: ctx + "system/news/add",
					data: formdata,
					type: "post",
					processData: false,
					contentType: false,
					success: function(result) {
						$.operate.successCallback(result);
					}
				})
	        }
	    }

	</script>
</body>
</html>
